<!-- 话题列表 详情页 -->
<template>
	<view>
		<!-- 引入 话题详情页 顶部模块 -->
		<topicInfofrom :topInfoList="topInfoList"></topicInfofrom>
		<!-- 分割线 -->
		<DividerLine></DividerLine>
		<!-- 文本展示 模块 -->
		<view
			class="p-2 flex align-center border-bottom"
			hover-class="bg-light"
			v-for="(item, index) in textList"
			:key="index"
		>
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">
				{{ item.title }}
			</text>
		</view>
		<!-- 分割线 -->
		<DividerLine></DividerLine>
		<!-- tab 选项卡导航 -->
		<view class="flex align-center py-2">
			<view
				class="flex-1 flex align-center justify-center"
				v-for="(item, index) in tabBars"
				:key="index"
				:class="index === tabIndex ? 'font-lg font-weight-bold text-main' : 'font-md'"
				@click="changeTab(index)"
				>{{ item.name }}</view
			>
		</view>
		<!-- 选项卡 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item, index) in listData" :key="index">
				<commonList :item="item" :index="index"></commonList>
			</block>
			<!--  引入 上拉加载 组件-->
			<loadMore :loadmore="loadtext"></loadMore>
		</template>
		<!-- 加载中 -->
		<template v-else-if="!FirstLoad">
			<uni-load-more iconType="circle" showIcon status="loading" showText :content-text="contentText" />
		</template>
		<!-- 兜底样式 -->
		<template v-else>
			<noThing />
		</template>
	</view>
</template>

<script>
	// 引入 话题详情页 顶部模块
	import topicInfofrom from '@/components/top-detail/topic-info.vue';
	// 引入 通用列表 组件
	import commonList from '@/components/common/common-list.vue';
	// 引入兜底样式
	import noThing from '@/components/common/no-thing.vue';
	// 引入上拉加载组件
	import loadMore from '@/components/common/load-more.vue';
	export default {
		components: { topicInfofrom, commonList, noThing, loadMore },
		data() {
			return {
				// 话题列表，路由传入的数据
				topInfoList: {
					id: 0, // 此条话题数据 id
					coverImg: '', // 话题图片
					title: '', // 话题名称
					desc: '', // 话题描述
					news_count: 0, // 动态 数据
					today_count: 0, // 今日 数据
				},
				// 文本展示 数据
				textList: [
					{ title: '【联盟手游】4月龙魂商店上新，德玛西亚皇子-孤胆英豪 和 飞机-海牛骑士' },
					{ title: '【手游话题】4.1版本，宗师不在设置人数限制，凡是达到40颗星，就可到达宗师' },
				],
				// 默认选中 第一个选项卡
				tabIndex: 0,
				// 选项卡数据
				tabBars: [
					{
						name: '默认',
					},
					{
						name: '最新',
					},
				],
				// 默认列表 数据
				list1: [],
				loadtext1: '上拉加载更多',
				page1: 1,
				firstLoad1: false, // 用于判断，列表数据是否 重复加载
				// 最新列表 数据
				list2: [],
				loadtext2: '上拉加载更多',
				page2: 1,
				firstLoad2: false, // 用于判断，列表数据是否 重复加载
				contentText: {
					contentrefresh: '加载中...',
				},
			};
		},
		// 计算属性
		computed: {
			// 列表数据
			listData() {
				// 判断点击的那个  选项卡导航（就返回那个数据）
				if (this.tabIndex === 0) {
					return this.list1;
				}
				return this.list2;
			},
			// 当前上拉加载
			loadtext() {
				// 判断点击的那个  选项卡导航（就返回那个数据）
				if (this.tabIndex === 0) {
					return this.loadtext1;
				}
				return this.loadtext2;
			},
			FirstLoad() {
				// 判断点击的那个  选项卡导航（就返回那个数据）
				if (this.tabIndex === 0) {
					return this.firstLoad1;
				}
				return this.firstLoad2;
			},
		},
		// 监听 页面加载时 ----------------------------------------------------
		onLoad(e) {
			// 如果 路由有传入的数据
			if (e.detail) {
				// 接收 话题列表 路由传入的参数
				this.topInfoList = JSON.parse(e.detail);
				// 动态 修改 当前页面标题
				uni.setNavigationBarTitle({
					title: this.topInfoList.title,
				});
			}
			// 获取指定话题 下的文章列表 接口
			this.getData();
			// 监听common-list组件 关注和顶踩
			uni.$on('updateFollSupport', (e) => {
				switch (e.type) {
					case 'follow': // 关注
						this.follow(e.data.user_id);
						break;
					case 'support': // 顶踩 操作
						this.doSupport(e.data);
						break;
				}
			});
		},
		// 页面卸载 时
		onUnload() {
			// 清除 监听事件
			uni.$off('updateFollSupport', (e) => {});
		},
		// 监听 触底事件---------------------------------------------------------
		onReachBottom() {
			/**
			 * console.log('loadText'+(this.tabIndex+1));
			 * loadText1 为默认页面 的触底事件，loadText2 为最新页面 的触底事件
			 */
			this.loadMoreEvent();
		},
		methods: {
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 找到 当前作者的 所有列表数据*/
				// 查询 所有分类 tab 下面的list列表数据
				this.list1.forEach((item) => {
					// 当前点击的用户下的 isFollow (改为true，隐藏关注)
					if (item.user_id === user_id) {
						item.isFollow = !item.isFollow;
					}
				});
				this.list2.forEach((item) => {
					// 当前点击的用户下的 isFollow (改为true，隐藏关注)
					if (item.user_id === user_id) {
						item.isFollow = !item.isFollow;
					}
				});
			},
			doSupport(e) {
				// 索引从 0 开始，页数从1 开始(拿到当前分页)
				let no = this.tabIndex + 1;
				// 拿到 当前的分类选项卡 对应的list列表数据
				this['list' + no].forEach((item) => {
					// 拿到 每一条 帖子的id
					// 如果列表数据id 和 顶踩 操作id一致
					if (item.id === e.id) {
						// console.log('顶踩操作',item);
						// 判断之前是否已经 赞 或踩 (之前未操作)
						if (item.support.type === '') {
							/* 4. 点击当前 赞 或 踩 数量+1
							 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
							item.support[e.type + '_count']++;
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
							// 赞 -1
							item.support.support_count--;
							// 踩 +1
							item.support.unsupport_count++;
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
							// 赞 +1
							item.support.support_count++;
							// 踩 -1
							item.support.unsupport_count--;
						}
						/* 2. 赋值给，子组件发布的type（赞 或踩）
						   3. 子组件 通过type 判断 添加样式 或 事件 */
						item.support.type = e.type;
					}
				});
				// 消息提示
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				uni.showToast({ title: msg, duration: 500 });
			},
			// 切换 tab 选项卡
			changeTab(index) {
				this.tabIndex = index;
				// 判断是否 ，false是首次加载，true为加载过一次就不重复加载
				if (!this['firstLoad' + (index + 1)]) {
					this.getData();
				}
			},
			// 获取指定话题 下的文章列表 接口
			getData() {
				// 索引从 0 开始，页数从1 开始(拿到当前分页)
				let no = this.tabIndex + 1;
				let page = this['page' + no];
				// 判断 是否处于 第一页 列表数据（如果是就是用户在刷新，否则追加数据）
				let isRefresh = page === 1;
				this.$H
					.get('/topic/' + this.topInfoList.id + '/post/' + page)
					.then((res) => {
						console.log(res);
						// 循环获取到，指定的列表数据，要循环遍历一下
						let list = res.list.map((v) => {
							// 调用 封装的 工具类utils.js中，转换列表数据方法
							return this.$U.forMatCommonList(v);
						});
						/* 根据获取到 指定id分类，赋值列表数据
					   判断 是否处于 第一页 列表数据
					  （如果是 那用户正在刷新页面，否则追加数据）
					   加载更多[当前页数据，下一页数据]*/
						this['list' + no] = isRefresh ? [...list] : [...this['list' + no], ...list];
						/* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
						this['loadtext' + no] = list.length < 10 ? '没有更多了' : '上拉加载更多';
						// console.log(list.length);
						// 判断是否 重复加载列表数据
						if (isRefresh) {
							this['firstLoad' + no] = true;
						}
					})
					.catch((err) => {
						// 如果未获取到数据
						if (!isRefresh) {
							// 如果不是刷新的情况下，退回上一页
							this['page' + no]--;
						}
					});
			},
			// 上拉加载更多
			loadMoreEvent() {
				// 拿到当前点击  的选项卡导航
				let index = this.tabIndex;
				let no = index + 1; // 获取到当前页数
				// 判断是否处于可加载状态
				if (this.loadtext !== '上拉加载更多') return; // 不可加载状态
				this['loadtext' + no] = '加载中...';
				// 请求 数据
				this['page' + no]++;
				setTimeout(() => {
					this.getData();
				}, 2000);
			},
		},
	};
</script>

<style lang="scss">
	.filter {
		filter: blur(2px);
	}
</style>
